<template>
	<view class="box">
		<view class="header">
			<view class="iconfont icon-fanhui" @click="fanhui">返回</view>
			<view class="">异议申请</view>
			<view class="" @click="xinzheng">新增</view>
		</view>
		<view class="dabox">
			<view class="shuru">
				<input type="text" v-model="formInline.search" @input="onSearch" placeholder="请选择月份" />
			</view>
			<view class="biao" v-for="i in  tobleData" :key="0" @click="xinxi(i.sq_id)">
				<view class="A">
					<view>申请月份</view>
					<view>{{i.sq_yue}}</view>
				</view>
				<view class="B">
					<view>状态</view>
					<view>{{i.sq_zhuangtai}}</view>
				</view>
				<view class="C">
					<view>申请时间</view>
					<view>{{i.sq_time}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import http from '../../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
				table: '',
				search: "",
				formInline: {
					search: "",
				},
				xinzheng() {
					uni.navigateTo({
						url: '../xinzhengyiyishenqing/xinzhengyiyishenqing'
					})
				},
				xinxi(i){
						uni.setStorageSync('xiugai', JSON.stringify(i));
					uni.navigateTo({
						url: '../chakanyiyishenqing/chakanyiyishenqing'
					})
				},
				onSearch: function() {
					if (data.formInline.search.trim()) {
					 data.search = data.formInline.search
					 } else {
					   data.search = '';
					  }
				         
					 },
			
			});
			
			onMounted(() => {
				http({
					url: "/miniwatermeter/getyiyi",
					method: "get",
				}).then((res) => {
					data.table = res.data.data
				})
			})

			const tobleData = computed(() => {
				if (data.search) {
					let arr = data.table.filter((v) => {

						if (String(v.sq_yue).indexOf(data.search) != -1) {
							return v;
						}
					})
					return arr;
				} else {
					return data.table;
				}

			});
			return {
				...toRefs(data),
				tobleData
			};

		},
		onLoad() {},

		methods: {
			fanhui: function() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style lang="scss">
	@import url("~@/static/xzafont/font/iconfont.css");

	.header .icon-fanhui {
		font-size: 35rpx;
	}

	.box {
		font-size: 35rpx;
	}

	.dabox {
		margin: 15rpx 15rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		/* background-color: #FFFFFF; */
		line-height: 90rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.shuru {
		border: 1rpx solid #F8F8F8;
		border-radius: 40rpx;
		padding: 15rpx 15rpx;
	}

	.biao {
		border: 1rpx solid #F8F8F8;
		margin-top: 10rpx;
		padding: 20rpx 0;
	}

	.A,
	.B,
	.C {
		display: flex;
		flex-wrap: nowrap;
		padding: 5rpx 15rpx;
	}

	.A>view:nth-child(1),
	.B>view:nth-child(1),
	.C>view:nth-child(1) {
		width: 300rpx;
	}

	.A>view:nth-child(2),
	.B>view:nth-child(2),
	.C>view:nth-child(2) {
		color: #666666;
	}
</style>
